import { Button, Typography, styled } from '@mui/material'
import CardList from '../components/cardlist/cardlist'
import SearchResult from '../components/catalog/searchResult'
import { useNavigate } from 'react-router-dom'
import { useAppDispatch, useAppSelector } from '../store/hooks'
import { fetchCatalog } from '../store/reducers/slices/catalogSlice'
import { useEffect } from 'react'
import {
	selectCatalogQuantity,
	selectPage,
	selectSearch,
} from '../store/reducers/selectors'
import { DEFAULT_ITEMS_PER_PAGE } from '../components/cardlist/pagination'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
}))

const StyledButton = styled(Button)(() => ({
	width: 'fit-content',
	textTransform: 'none',
	color: '#7B8E98',
	fontFamily: 'Nunito',
	fontSize: '14px',
	border: '0',
}))

const Catalog = () => {
	const search = useAppSelector(selectSearch)
	const catalogQuantity = useAppSelector(selectCatalogQuantity)
	const page = useAppSelector(selectPage)
	const dispatch = useAppDispatch()

	const navigate = useNavigate()

	useEffect(() => {
		const params = { page: page, limit: DEFAULT_ITEMS_PER_PAGE, search: search }
		dispatch(fetchCatalog(params))
	}, [dispatch, page, search])

	return (
		<StyledContainer>
			<StyledButton onClick={() => navigate(-1)}>{'< Назад'}</StyledButton>
			<StyledHeader>Каталог</StyledHeader>
			<SearchResult request={search} quantity={catalogQuantity} />
			<CardList />
		</StyledContainer>
	)
}

export default Catalog
